<!-- <script> {{{ -->
<script setup lang="ts">
import {nextTick, ref} from 'vue'
import {Server} from '@/stores/ajax';
import {ServerUtils} from '@/serverUtils'
import {Delta, QuillEditor} from '@vueup/vue-quill'
import {QuillDeltaToHtmlConverter} from 'quill-delta-to-html';
import Viewer from '@/components/viewer.vue'
import * as cheerio from 'cheerio'
import {lowerPostImage} from '@/utils';

import {timeFormat} from '@/utils'
const getQuillHTML = (editor: any) => {
    return new QuillDeltaToHtmlConverter(editor.getContents().ops, {}).convert()
}

type PostCallback = (page: number, posts_per_page: number) => Promise<any>
const props = defineProps({
    postCallback: Function,
    showSubarea: Boolean
})
const postCallback: PostCallback = props.postCallback as any
// let maxPostWordsLength = 150

let newPosts = $ref<any[]>([])
let loadedPage = 1
let loading = false
let loadAll = ref(false)
const refresh = async () => {
    newPosts = []
    loadedPage = 1
    nextTick(() => {
        load(1)
    })
}
defineExpose({
    refresh
})
// refresh()
const load = async (page = loadedPage) => {
    console.log(`Loadding page ${loadedPage}`)
    if (loading == true) return
    loading = true
    await postCallback(page, 10)
        .then(posts => {
            // console.log(posts)
            let lastCnt = newPosts.length
            if (posts?.list.length) {
                for (let post of posts.list) {
                    lowerPostImage(post)
                    newPosts.push(post)
                }
                loadedPage++
            }
            loading = false
            if (lastCnt == newPosts.length) {
                loadAll.value = true
            }
        })
}

</script>
<!-- }}} -->

<template>

    <div v-if='$DEV' class="dev-tag">postList4</div>
    <div class="post-list" v-infinite-scroll="load">
        <div class="post-item" v-for="item in newPosts">
            <div class="subarea-label" v-if='showSubarea'>
                {{ item.subarea.name}}
            </div>
            <div class="click hp"
                @click="$router.push({path: `/bbs/forums/topic/${item.topic.id}`})">
                <div class="post-title">
                    {{ item.topic.name}}
                </div>
            </div>
            <div class="post-abstract"
                v-dompurify-html="item.content" />
            <!-- <div class="post-pic-area fhs" > -->
            <!--     <img src="pic-example1.png" class="post-pic" /> -->
            <!--     <img src="pic-example2.png" class="post-pic" /> -->
            <!-- </div> -->
            <div class="img-list">
                <Viewer :images="item.images" />
            </div>
            <div class="lastline fhs">
                <div class="author-avatar fv">
                    <el-avatar :size="14"
                        :src="Server.fileBaseURL + item.user.avatar" />
                </div>
                <div class="author-name">{{
                        item.user.user_name
                }}</div>
                <img src="icon-time.png" class="icon-time">
                <div class="publish-time">
                    {{ timeFormat(item.create_time
                        )
                    }}
                </div>
                <img src="icon-view.png" class="icon-view">
                <div class="view-num">
                    {{ item.views}}
                </div>
                <img src="icon-remark.png"
                    class="icon-remark">
                <div class="remark-num">
                    {{ item.subpost_num}}
                </div>
            </div>
            <div class="div-line">
            </div>
        </div>
    </div>
    <!-- {{ loadAll}} -->
    <div style='margin-top: 30px;'>
        <div v-if="!loading && loadAll" class="fh"
            style="color: #999;">
            加载完毕
        </div>
        <div v-else-if="loading" class="fh"
            style="color: #999;">
            加载中
        </div>
    </div>
    <div style="height: 5vh;"></div>

</template>

<style scoped lang="scss">
.post-list {
    min-width: 660px;

    .post-item {
        margin-bottom: 12px;

        .subarea-label {
            color: #999999;
            font-size: 14px;
            margin-bottom: 2px;
        }

        .post-title {
            font-size: 20px;
            color: #222;
            margin-bottom: 4px;
        }

        .post-abstract {
            font-size: 16px;
            color: #666666;
            margin-bottom: 10px;
            white-space: nowrap;
            max-height: 20px;
            overflow: hidden;
        }

        .post-pic-area {
            gap: 16px;
            margin-bottom: 8px;

            .post-pic {
                width: 180px;
                height: 100px;
                object-fit: cover;

            }
        }

        .lastline {
            font-size: 14px;
            line-height: 20px;
            color: #999999;
            align-items: center;
            margin-bottom: 8px;

            .author-avatar {
                margin-right: 4px;
            }

            .author-name {
                margin-right: 15px;
            }

            .icon-time {
                width: 18px;
                height: 18px;
                margin-right: 2px;
            }

            .publish-time {
                margin-right: 16px;
            }

            .view-num {
                margin-right: 16px;
            }

            .icon-view {
                width: 18px;
                height: 18px;
                filter: opacity(0.6);
                margin-right: 2px;
            }

            .icon-remark {
                width: 14px;
                height: 14px;
                filter: opacity(0.7);
                margin-right: 2px;
            }

        }

        .div-line {
            width: 80%;
            border-top: 1px solid #0003;
        }
    }

}
</style>
<style>
.post-quill {
    height: 100%;
    width: 100%;
}
</style>

